import React, { useState, memo, useEffect } from "react";
import { Flex, Rate } from "antd";
import type { InputNumberProps } from "antd";
import anime from "animejs/lib/anime.es.js";

const desc = ["terrible", "bad", "normal", "good", "wonderful"];
interface info {
  name: string;
  address: {
    new: string;
  };
}
interface P {
  value: number | undefined;
  changeSlider: InputNumberProps["onChange"];
  info: info;
}
const Child = memo((props: P) => {
  const { value: values, changeSlider } = props;
  const [value, setValue] = useState(values);
  console.log("Child渲染", props);
  let boxList: Array<string> = new Array(64).fill("0");
  const [isAnime, setIsAnime] = useState(true);

  const initAnime = () => {
    if (isAnime) {
      setIsAnime(false);
      anime({
        targets: "#box",
        scale: [
          { value: 0.1, easing: "easeOutSine", duration: 500 },
          { value: 1, easing: "easeInOutQuad", duration: 1200 },
        ],
        delay: anime.stagger(200, { grid: [16, 4], from: "center" }),
        complete: (anim) => {
          setIsAnime(true);
        },
      });
    }
  };
  useEffect(() => {
    initAnime();
    // eslint-disable-next-line 
  }, []);

  return (
    <Flex gap="middle" vertical>
      <div id="animeContent" onClick={initAnime}>
        {boxList.map((_: string, index: Number) => {
          return <div id="box" key={index + ""}></div>;
        })}
      </div>
      <Rate
        tooltips={desc}
        onChange={(value) => {
          setValue(value);
          changeSlider!(value);
        }}
        value={Number(sessionStorage.getItem("value")) || values}
      />
      {value ? <span>{desc[(values as number) - 1]}</span> : null}
    </Flex>
  );
});

export default Child;
